<template>
  <div>
    <!-- 此处用v-if 是为了案例能看到效果 
    因为v-if是重新添加dom元素
    v-show是利用display则没有 -->
    <button v-if="is" @click="chekout">支付</button>
    <input  ref="zz" v-else type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      is: true,
     
    };
  },
  methods: {
    chekout() {
       console.log(this.num);

      
      this.is = false;
      // $nexttick(回调函数)方法,会把回调函数里面的内容,推迟到下一个dom更新后再执行
      // 因为vue的dom更新是异步的, this.is = false;完成是 dom实际还没渲染出来,所以无法获取焦点
      // 所以使用$nexttick(回调函数)方法这个方法
      
      this.$nextTick(() => {
        this.$refs.zz.focus();
       
      });
    },
  },
};
</script>

<style>
</style>